<div class="container">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 center-image">
      <%= image_tag "svgs/signup.svg", alt: "Signup Sketch", class: "users-image" %>
      <h5><%= t("users.registrations.get_started") %></h5>
    </div>

    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
      <div class="form-container">
        <h1 class="users-main-heading"><%= t("sign_up") %></h1>
        <%= form_with(model: resource, as: resource_name, url: registration_path(resource_name), local: true) do |f| %>
          <%= f.invisible_captcha :subtitle %>
          <% if !resource.errors.empty? %>
            <div class="error-message">
              <ul>
                <% resource.errors.full_messages.each do |message| %>
                  <li><%= message %></li>
                <% end %>
              </ul>
            </div>
          <% end %>
          <div class="field mb-3">
            <h6><%= f.label :name %></h6>
              <%= f.text_field :name, placeholder: t('enter_name'), autofocus: true, class: "form-control form-input" %>
          </div>
          <div class="field mb-3">
            <h6><%= f.label :email %></h6>
              <%= f.email_field :email, placeholder: t('enter_email'), class: "form-control form-input" %>
          </div>
          <div class="field mb-3">
          <h6 class="password-length">
            <%= f.label :password %>
            <% if @minimum_password_length %>
              <span> <%= t("users.minimum_password_length", minimum_password_length: @minimum_password_length) %></span>
            <% end %>
          </h6>
          <div class="input-group form-input">
            <%= password_field_tag "#{f.object_name}[password]", nil, autocomplete: "off", placeholder: t('enter_password'), class: "form-control users-password-input" %>
            <div class="input-group-addon ms-3 mt-2" onclick="togglePassword()">
              <i class="far fa-eye-slash password-icon" aria-hidden="true" id="toggle-icon"></i>
            </div>
          </div>
        </div>
          <div class="field mb-3">
            <div class="input-group">
              <% if Flipper.enabled?(:recaptcha) %>
                <%= flash[:recaptcha_error] %>
                <%= recaptcha_tags %>
              <% end %>
              <%= f.submit t("sign_up"), class: "btn primary-button users-login-primary-button" %>
              <div class="users-text-container">
                <span class="users-text"><%= t("users.registrations.ask_already_registered") %></span>
                <%= link_to t("login"), new_user_session_path, class: "anchor-text" %>
              </div>
            </div>
          </div>
          <%= render(AuthComponents::SocialLoginComponent.new(devise_mapping: devise_mapping, resource_name: resource_name)) %>
        <% end %>
      </div>
    </div>
  </div>
</div>

<script src="/js/togglePassword.js"></script>
